<template>
    <div>
        <div class="LogOutList">
            <template>
                <el-table
                    class="heard-bg el-table"
                    :data="logOutTableData"
                    stripe
                    border
                    highlight-current-row
                    style="100%"
                >
                    <el-table-column label="工号" prop="loginId"></el-table-column>
                    <el-table-column label="签出时间" prop="logoutTime" show-overflow-tooltip></el-table-column>
                    <el-table-column label="签入时间" prop="loginTime">
                        <!-- <template slot-scope="scope">{{scope.row.loginTime | filterDateYYYYMMDD}}</template> -->
                    </el-table-column>
                    <el-table-column label="签入时长" prop="loginLong">
                        <!-- <template slot-scope="scope">{{scope.row.loginLong | filterDateYYYYMMDD}}</template> -->
                    </el-table-column>
                    <el-table-column label="操作" prop="succeedName">
                        <template slot-scope="scope">
                            <!-- <div class="text_a" @click="handleclickInfo('upd',scope.row.id)">修改</div>
                            <div
                                class="text_a"
                                v-show="!ifneedaudit"
                                @click="handleclickInfo('audit',scope.row.id)"
                            >审核</div>
                            <div class="text_a" @click="handleclickInfo('del',scope.row.id)">删除</div>-->
                            <el-button
                                size="small"
                                id="holdBtnC"
                                @click="handleclickInfo('upd',scope.row.id)"
                            >修改</el-button>
                            <el-button
                                v-show="ifneedaudit&&scope.row.isExamine==='1'&&scope.row.status==='0'"
                                size="small"
                                id="holdBtnC"
                                @click="handleclickInfo('audit',scope.row.id)"
                            >审核</el-button>
                            <el-button
                                size="small"
                                id="holdBtnC"
                                @click="handleclickInfo('del',scope.row.id)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 坐席选择弹框 -->
        <el-dialog
            v-drag
            :visible="agentBackuosDialogShowFlag1"
            append-to-body
            center
            width="1100px"
            class="header-button dialogHeader"
            custom-class="skillGroupDialog"
            @close="handleClose"
            :close-on-click-modal="false"
        >
            <div slot="title">签出报备1</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="100px"
                :rules="formRules"
                size="small"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="签出时间" prop="logoutTime">
                            <!--<el-input v-model="Edit.logoutTime" placeholder="请输入" style="width: 150px;" v-bind:disabled="true"/>-->
                            <el-date-picker
                                v-model="Edit.logoutTime"
                                type="datetime"
                                placeholder="请选择签出时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签入时间" prop="loginTime">
                            <!--<el-input v-model="Edit.loginTime" placeholder="请输入" style="width: 150px;" v-bind:disabled="true"/>-->
                            <el-date-picker
                                v-model="Edit.loginTime"
                                type="datetime"
                                placeholder="请选择签入时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签入时长" prop="loginLong">
                            <el-input
                                v-model="Edit.loginLong"
                                placeholder="请输入"
                                style="width: 150px;"
                                v-bind:disabled="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否审核" prop="isExamine">
                            <!--<el-input v-model="Edit.isExamine" placeholder="请输入" style="width: 150px;" />-->
                            <el-radio label="1" v-model="Edit.isExamine" border>是</el-radio>
                            <el-radio label="0" v-model="Edit.isExamine" border>否</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审核人" prop="examineUser">
                            <el-input
                                v-model="Edit.examineUser"
                                placeholder="请输入"
                                style="width: 150px;"
                                v-bind:disabled="true"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="是否通过" prop="isPass" v-if="examineOpinion">
                            <el-radio v-if="examineOpinion" label="1" v-model="isPass" border>通过</el-radio>
                            <el-radio v-if="examineOpinion" label="0" v-model="isPass" border>不通过</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="审核意见" prop="examineOpinion" v-if="examineOpinion">
                            <textarea
                                v-model="Edit.examineOpinion"
                                placeholder="请输入"
                                style="width: 68%; height: 50px"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="签出原因" prop="logoutReason">
                    <textarea
                        v-model="Edit.logoutReason"
                        placeholder="请输入"
                        style="width: 80%; height: 100px"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="btnBox footer">
                <el-button
                    size="small"
                    id="holdBtnC"
                    icon="el-icon-circle-close"
                    @click="handleClose"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-check"
                    @click="submitButton"
                >提 交</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-check"
                    @click="submitButton"
                >保 存</el-button>
                <!-- <el-button size="small" type="primary" @click="queryList">查 看</el-button> -->
            </div>
        </el-dialog>
        <div class="text_center" style="margin-top:20px;">
            <el-button type="primary" size="small" @click="handleAdd">新 增</el-button>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth';
import moment from 'moment';
export default {
    name: 'LogOutList',
    props: {
        // 点击 删除的方法
        // handleclickComingClose: {
        //     required: true,
        //     type: Function,
        // },
        teamInfo: {
            required: true,
            type: Object,
        },
    },
    data() {
        return {
            agentBackuosDialogShowFlag: false,
            agentBackuosDialogShowFlag1: false,
            formData: {
                loginTime: '',
                logoutTime: '',
                loginLong: '',
                isExamine: '',
                examineUser: '',
                logoutReason: '',
                loginId: '',
                agentId: '',
                loginName: '',
            },
            currentPage: 1, // 当前分页
            pageSize: 5, // 每页数量
            total: 0, // 数据总数
            searchLoading: false, // 查询按钮loading
            teamList: [], // 工作组下拉列表
            searchForm: { // 搜索表单字段
                startTime: '',//moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 30))).format('YYYY-MM-DD HH:mm:ss'), // 开始日期 默认为当前日期往前一个月
                endTime: '',//moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 截止时间 默认为当前日期
                dateTimeRange: [],
                teamCodeList: [], //工作组多选
                logoutReason: '', //报备类型
                loginId: '',//坐席登录工号
            },
            logOutTableData: [],
            // 坐席签出报备表字段
            Edit: {
                id: '',
                loginTime: '',
                logoutTime: '',
                loginLong: '',
                isExamine: '',
                examineUser: '',
                logoutReason: '',
                loginId: '',
                agentId: '',
                status: '',
                examineName: '',
                examineOpinion: '',
            },
            formRules: {
                isExamine: [
                    { required: true, message: '请选择是否需要确认', trigger: 'blur' },
                ],
                examineName: [
                    { required: true, message: '请选择审核人', trigger: 'blur' },
                ],
                logoutReason: [
                    { required: true, message: '请输入签出原因', trigger: 'blur' },
                ],
            },
            ifneedaudit: false,//是否显示审核
            examineOpinion: false,// 审核
            isPass: '',
        }
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return value;
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
    },
    computed: {
        ...mapGetters([
            //'teamInfo',
            'userInfo',
        ])
    },
    async mounted() {
        this.searchForm.loginId = this.userInfo.userAccount;

        this.getData(this.formData);

    },
    methods: {
        getData(form) {

            console.log("当前坐席工号：", this.searchForm.loginId, "userinfo:", this.userInfo, "审核人：", this.teamInfo);
            if (this.searchForm.loginId === this.teamInfo.leaderId) {
                this.searchForm.loginId = '';
                this.ifneedaudit = true;
            }

            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                loginId: this.searchForm.loginId,
                // examineUser: getToken() ? JSON.parse(getToken()).userAccount : '',
            };
            //params = Object.assign({}, params, form);
            console.log("params:::", params);
            this.$post.agentLogoutBackups.searchAgentLogoutBackupsByPage(params).then((res) => {
                //this.$post.busiReport.agentReportDetail(params).then((res) => {
                if (res.data.success) {
                    console.log("res.data.content.AgentLogoutBackupsList:::", res.data.content.AgentLogoutBackupsList);
                    this.logOutTableData = res.data.content.AgentLogoutBackupsList;
                    this.total = res.data.content.AgentLogoutBackupsCount;

                    //console.log("res.data.content.AgentLogoutBackupsList:::", res.data.content.recordList);
                    //this.logOutTableData = res.data.content.recordList;
                    //this.total = res.data.content.recordCount;
                }
            });

        },
        readCurrtenInfo(row) {
            let parent = {
                id: row.id,
            };
            this.$post.information.setVisited(parent).then((res) => {
                if (res.data.success) {
                    // this.$message.success('数据标记已读');
                }
            });

        },
        // 点击操作栏按钮
        handleclickInfo(event, id) {
            console.log('点击查看详情：', id, '操作类别：', event);
            console.log("当前坐席工号：", this.userInfo, "审核人：", this.teamInfo);
            this.logOutTableData.some(item => {
                if (item.id === id) {
                    this.Edit.id = id;
                    this.Edit.loginTime = item.loginTime;
                    this.Edit.logoutTime = item.logoutTime;
                    this.Edit.loginLong = item.loginLong;
                    this.Edit.isExamine = item.isExamine;
                    this.Edit.examineUser = item.examineUser;
                    this.Edit.logoutReason = item.logoutReason;
                    this.Edit.loginId = item.loginId;
                    this.Edit.agentId = item.agentId;
                    this.Edit.status = item.status;
                    this.Edit.examineName = item.examineName;

                }
            });
            if (event === 'upd') {
                this.agentBackuosDialogShowFlag1 = true;
            } else if (event === 'audit') {
                this.agentBackuosDialogShowFlag1 = true;
                this.examineOpinion = true;
            } else {
                //根据ID删除坐席签出报备:deleteById
                this.$confirm('确认删除该记录？', '提示', { customClass: 'warning', type: 'warning' })
                    .then(() => {
                        this.$post.agentLogoutBackups.deleteById({ id: id })
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('删除成功！');
                                    this.getData();
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    })
                    .catch(() => {
                    });
            }

            // this.handleOnComingFlag = true;
            // this.readCurrtenInfo(row)
            // this.formData.handoverName = row.handoverName;
            // this.formData.content = row.content;
        },
        handleAdd() {
            console.log("当前坐席工号a：", this.searchForm.loginId, "userinfoa:", this.userInfo, "审核人a：", this.teamInfo);
            this.Edit.id = '';
            this.Edit.loginTime = '';
            this.Edit.logoutTime = '';
            this.Edit.loginLong = '';
            this.Edit.isExamine = ''
            this.Edit.logoutReason = '';
            this.Edit.status = '';
            this.Edit.loginId = getToken() ? JSON.parse(getToken()).userAccount : '';
            this.Edit.agentId = getToken() ? JSON.parse(getToken()).ctiNum : '';
            this.Edit.examineUser = this.teamInfo.leaderId;
            this.agentBackuosDialogShowFlag1 = true;
        },

        // 弹框关闭
        handleClose() {
            this.agentBackuosDialogShowFlag = false;
            this.agentBackuosDialogShowFlag1 = false;
            this.showDraewe = false;
        },
        //提交
        submitButton() {
            this.$refs.Edit.validate((valid) => {
                if (valid) {
                    if (this.Edit.isExamine === '1') {
                        this.Edit.status = '0';
                    } else {
                        this.Edit.status = '1';
                    }
                    if (this.Edit.id + '' === '') {//添加坐席签出报备：addAgentLogoutBackups
                        this.$post.agentLogoutBackups.addAgentLogoutBackups(this.Edit).then((res) => {
                            if (res.data.success) {
                                this.$message.success('添加成功');
                                this.getData();
                                this.agentBackuosDialogShowFlag1 = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {//根据ID更新坐席签出报备：updateAgentLogoutBackupsById
                        this.$post.agentLogoutBackups.updateAgentLogoutBackupsById(this.Edit).then((res) => {
                            if (res.data.success) {
                                this.$message.success('修改成功');
                                this.getData();
                                this.agentBackuosDialogShowFlag1 = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    }
                } else {
                    this.$message.warning('请完成表单填写！');
                }
            });
        },
        // 查看更多
        queryList() {
            console.log("JSON.parse(getToken())", JSON.parse(getToken()));
            // 这里执行  UPDATE_ACTIVE_MENU 这个方法 是为了打开显示 tagsview 这个组件
            this.$store.commit('menu/UPDATE_ACTIVE_MENU', false);
            this.$router.push('/agentLogoutBackups/agentLogoutBackupList');
            this.handleClose();
        },

    },
}
</script>
<style scoped lang="scss">
.LogOutList {
    min-width: 500px;
}
</style>